<template>
	<Layout>
		<!-- Page Header-->
		<header
			class="masthead"
			style="background-image: url('/img/contact-bg.jpg')"
		>
			<div class="container position-relative px-4 px-lg-5">
				<div class="row gx-4 gx-lg-5 justify-content-center">
					<div class="col-md-10 col-lg-8 col-xl-7">
						<div class="page-heading">
							<h1>Contact Me</h1>
							<span class="subheading">Have questions? I have answers.</span>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!-- Main Content-->
		<main class="mb-4">
			<div class="container px-4 px-lg-5">
				<div class="row gx-4 gx-lg-5 justify-content-center">
					<div class="col-md-10 col-lg-8 col-xl-7">
						<p>
							Want to get in touch? Fill out the form below to send me a message
							and I will get back to you as soon as possible!
						</p>
						<div class="my-5">
							<!-- * * * * * * * * * * * * * * *-->
							<!-- * * SB Forms Contact Form * *-->
							<!-- * * * * * * * * * * * * * * *-->
							<!-- This form is pre-integrated with SB Forms.-->
							<!-- To make this form functional, sign up at-->
							<!-- https://startbootstrap.com/solution/contact-forms-->
							<!-- to get an API token!-->
							<form id="contactForm">
								<template v-if="!isSubmit">
									<div class="form-floating">
										<input
											class="form-control"
											id="name"
											type="text"
											v-model="name"
											placeholder="Enter your name..."
											data-sb-validations="required"
										/>
										<label for="name">Name</label>
										<div
											class="invalid-feedback"
											data-sb-feedback="name:required"
										>
											A name is required.
										</div>
									</div>
									<div class="form-floating">
										<input
											class="form-control"
											id="email"
											v-model="email"
											type="email"
											placeholder="Enter your email..."
											data-sb-validations="required,email"
										/>
										<label for="email">Email address</label>
										<div
											class="invalid-feedback"
											data-sb-feedback="email:required"
										>
											An email is required.
										</div>
										<div
											class="invalid-feedback"
											data-sb-feedback="email:email"
										>
											Email is not valid.
										</div>
									</div>
									<div class="form-floating">
										<input
											class="form-control"
											id="phone"
											type="tel"
											v-model="phone"
											placeholder="Enter your phone number..."
											data-sb-validations="required"
										/>
										<label for="phone">Phone Number</label>
										<div
											class="invalid-feedback"
											data-sb-feedback="phone:required"
										>
											A phone number is required.
										</div>
									</div>
									<div class="form-floating">
										<textarea
											class="form-control"
											id="message"
											v-model="message"
											placeholder="Enter your message here..."
											style="height: 12rem"
											data-sb-validations="required"
										></textarea>
										<label for="message">Message</label>
										<div
											class="invalid-feedback"
											data-sb-feedback="message:required"
										>
											A message is required.
										</div>
									</div>
									<br />
								</template>
								<!-- Submit success message-->
								<!---->
								<!-- This is what your users will see when the form-->
								<!-- has successfully submitted-->
								<div v-else class="" id="submitSuccessMessage">
									<div class="text-center mb-3">
										<div class="fw-bolder">Form submission successful!</div>
										To activate this form, sign up at
										<br />
										<a href="https://startbootstrap.com/solution/contact-forms"
											>https://startbootstrap.com/solution/contact-forms</a
										>
									</div>
								</div>
								<!-- Submit error message-->
								<!---->
								<!-- This is what your users will see when there is-->
								<!-- an error submitting the form-->
								<div class="d-none" id="submitErrorMessage">
									<div class="text-center text-danger mb-3">
										Error sending message!
									</div>
								</div>
								<!-- Submit Button-->
							</form>
							<button
								v-if="!isSubmit"
								class="btn btn-primary text-uppercase "
								@click="submit"
							>
								Send
							</button>
						</div>
					</div>
				</div>
			</div>
		</main>
	</Layout>
</template>
<script>
import axios from 'axios';
export default {
	name: 'Contact',
	data() {
		return {
			name: '',
			email: '',
			phone: '',
			message: '',
			isSubmit: false,
		};
	},
	methods: {
		async submit() {
			const params = {
				name: this.name,
				email: this.email,
				phone: this.phone,
				message: this.message,
			};
			console.log(params, 'asdf');
			await axios({
				method: 'post',
				url: this.GridsomeApiUrl + '/contacts',
				data: {
					...params,
				},
			});
			this.isSubmit = true;
		},
	},
};
</script>
